<template>
  <view>
    <view
      class="searchModule"
      :style="{
        background: info.bg.color,
        paddingTop: `${info.style.pTop * 2}rpx`,
        paddingLeft: `${info.style.pLeft * 2}rpx`,
        paddingRight: `${info.style.pRight * 2}rpx`,
        paddingBottom: `${info.style.pBottom * 2}rpx`,
        marginTop: `${info.style.mTop * 2}rpx`,
        marginLeft: `${info.style.mLeft * 2}rpx`,
        marginRight: `${info.style.mRight * 2}rpx`,
        marginBottom: `${info.style.mBottom * 2}rpx`,
      }"
    >
      <view
        :style="{
          borderRadius: info.style.type == 'plain' ? '8rpx' : '',
          background: info.style.color,
        }"
        :class="
          'info1 flex aitems' +
          (info.align.value == 'center'
            ? 'jcenter'
            : info.align.value == 'right'
            ? 'jend'
            : '')
        "
        @click="gourl(`/pages/goods/search`)"
      >
        <view class="icon">
          <u-icon name="search" size="24" color="#000"></u-icon>
        </view>
        <view class="input">{{ info.placeholder.text }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { go } from "../../../utils/wxAPI";
export default {
  props: {
    info: {
      default: {},
    },
  },
  mounted() {
    console.log(this.info);
  },
  methods: {
    gourl(url) {
      go(url);
    },
  },
};
</script>

<style lang="scss" scoped>
.searchModule {
  .info1 {
    height: 80prx;
    background: #f6f6f6;
    border-radius: 40rpx;
    padding: 0 30rpx;

    .icon {
      font-size: 40rpx;
      position: relative;
      top: 2rpx;
    }

    .input {
      margin-left: 20rpx;
      height: 80prx;
      font-size: 24rpx;
      color: #999999;
      line-height: 80rpx;
    }
  }
}
</style>
